<template>
  <view class="order-details">
    <!-- 给header上与data上加on为退款订单-->
    <view class="header  acea-row row-middle" :class="refundOrder ? 'on' : ''">
      <view class="data" :class="refundOrder ? 'on' : ''">
        <rich-text class="state" :nodes="orderInfo._status._msg">{{ orderInfo._status._msg }}</rich-text>
<!--        <view>{{ orderInfo.createTime ||  '' }}</view>-->
      </view>
    </view>

    <view class="allAddress" >
      <view class="address acea-row row-between-wrapper" >
        <view class="addressCon" v-if="orderInfo.realName">
          <view class="name">
            <text class="default font-color-red" v-if="orderInfo.isDefault" style="width: 52rpx;height: 36rpx;background: #F3F7F8;border-radius: 4rpx 4rpx 4rpx 4rpx;">默认</text>
            {{ orderInfo.realName }}
            <text class="phone">{{ orderInfo.userPhone }}</text>
          </view>
          <view>
            {{ orderInfo.userAddress }}
          </view>
        </view>
<!--        <image src="https://cos.aitshirt.cn/app-icon/rightarr.png" style="width: 24rpx; height: 24rpx;"></image>-->
      </view>
    </view>

    <OrderGoods
      :evaluate="status.type || 0"
      :isIntegral="isIntegral"
      :cartInfo="orderInfo.cartInfo || []"
      style="background: #fff"
    ></OrderGoods>


    <view class="wrapper">

      <view class="item acea-row row-between">
        <view>下单时间：</view>
        <view class="conter">{{ orderInfo.createTime || '' }}</view>
      </view>
<!--      <view class="item acea-row row-between">-->
<!--        <view>订单类型：</view>-->
<!--        <view class="conter">{{ orderTypeName || '' }}</view>-->
<!--      </view>-->
      <view class="item acea-row row-between">
        <view>支付状态：</view>
        <view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
      </view>
<!--      <view class="item acea-row row-between">-->
<!--        <view>支付方式：</view>-->
<!--        <view class="conter">{{ orderInfo._status._payType || '' }}</view>-->
<!--      </view>-->
      <view class="item acea-row row-between" v-if="orderInfo.mark">
        <view>备注：</view>
        <view class="conter">{{ orderInfo.mark || '' }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>订单编号：</view>
        <view class="conter acea-row row-middle row-right">
          {{ orderInfo.orderId || '' }} |
          <!-- #ifndef H5 -->
          <text class="copy copy-data" style="color: #F25A27; border: none; padding-left: 0;" @click="copyClipboard(orderInfo.orderId)">复制</text>
          <!-- #endif -->
        </view>
      </view>
    </view>



    <view v-if="orderInfo.status != 0">
      <view class="wrapper" v-if="orderInfo.deliveryType === 'express'">
        <view class="item acea-row row-between">
          <view>配送方式：</view>
          <view class="conter">发货</view>
        </view>
        <view class="item acea-row row-between">
          <view>快递公司：</view>
          <view class="conter">{{ orderInfo.deliveryName || "" }}</view>
        </view>
        <view class="item acea-row row-between">
          <view>快递号：</view>
          <view class="conter">{{ orderInfo.deliveryId || "" }}</view>
        </view>
      </view>

      <view class="wrapper" v-else>
        <view class="item acea-row row-between">
          <view>配送方式：</view>
          <view class="conter">送货</view>
        </view>
        <view class="item acea-row row-between">
          <view>配送人：</view>
          <view class="conter">{{ orderInfo.deliveryName || "" }}</view>
        </view>
        <view class="item acea-row row-between">
          <view>配送电话：</view>
          <view class="conter acea-row row-middle row-right">
            {{ orderInfo.deliveryId || "" }}
            <text class="copy">拨打</text>
          </view>
        </view>
      </view>
    </view>
    <!--     退款订单详情 -->
    <view class="wrapper" v-if="refundOrder">
      <view class="item acea-row row-between">
        <view>收货人：</view>
        <view class="conter">{{ orderInfo.realName || '' }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>联系电话：</view>
        <view class="conter">{{ orderInfo.userPhone || '' }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>收货地址：</view>
        <view class="conter">{{ orderInfo.userAddress || '' }}</view>
      </view>
    </view>
    <view class="wrapper">
      <view class="item acea-row row-between" v-if="!isIntegral">
        <view>支付金额：</view>
        <view class="conter">￥{{ orderInfo.totalPrice || 0 }}</view>
      </view>
      <view class="item acea-row row-between" v-if="isIntegral">
        <view>支付积分：</view>
        <view class="conter">{{ orderInfo.payIntegral || 0 }}积分</view>
      </view>
      <view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
        <view>优惠券抵扣：</view>
        <view class="conter">-￥{{ orderInfo.couponPrice ||0 }}</view>
      </view>
      <view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
        <view>积分抵扣：</view>
        <view class="conter">-￥{{ orderInfo.deductionPrice || 0 }}</view>
      </view>
      <view class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
        <view>运费：</view>
        <view class="conter">￥{{ orderInfo.payPostage || 0 }}</view>
      </view>
      <view class="actualPay acea-row row-right">
        实付款：
        <text class="money font-color-red" v-if="!isIntegral">￥{{ orderInfo.payPrice || 0 }}</text>
        <text class="money font-color-red" v-if="isIntegral">{{ orderInfo.payIntegral || 0 }}积分</text>
      </view>
    </view>
    <view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
      <template v-if="status.type == 0">
        <view class="bnt cancel" @click="cancelOrder">取消订单</view>
        <view class="bnt bg-color-red" @click="toPay(pay)">立即支付</view>
      </template>
      <template v-if="orderInfo.refundStatus === 0 && orderInfo.paid === 1">
        <view class="bnt cancel" @click="showReturn = true">申请售后</view>
      </template>

<!--      <template v-if="order._status._type == 3">-->
<!--        <view class="bnt bg-color-red" @click="routerGo()">评价</view>-->
<!--      </template>-->
      <!--  -->
      <template v-if="orderInfo.shippingType == 1 && status.type == 2">
        <view class="bnt default"
              @click="bindGoWuliu()"
        >查看物流</view>
        <view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
      </template>
      <template v-if="orderInfo.shippingType == 1 && status.type == 3 && orderInfo.deliveryType == 'express'">
        <view class="bnt default"
              @click="_router.push({ path: '/pages/order/Logistics/Logistics' ,query:{id:orderInfo.orderId }})">查看物流</view>
      </template>
      <template v-if="orderInfo.shippingType == 1 && status.type == 4">
        <view class="bnt cancel" @click="delOrder">删除订单</view>
        <view class="bnt default" @click="
        _router.push({ path: '/pages/order/Logistics/Logistics' ,query:{id:orderInfo.orderId }})
        ">查看物流</view>
      </template>
<!--      <template v-if="status.type == 6">-->
<!--        <view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>-->
<!--      </template>-->
    </view>
<!--    <Payment-->
<!--      v-model="pay"-->
<!--      :value="pay"-->
<!--      @input="(e) => pay =e"-->
<!--      :types="payType"-->
<!--      @checked="toPay"-->
<!--      :balance="userInfo.nowMoney"-->
<!--    ></Payment>-->

    <view class="wrapper"  v-if="status.type == 0">
      <view class="item">
        <view>选择支付方式</view>
        <view class="option-list">
          <view class="option-item">
            <image src="https://cos.aitshirt.cn/app-icon/wx.png" class="icon"></image>
            <text class="option-text">微信零钱</text>
            <radio value="wechat" :checked="pay === 'weixin'" color="#F25A27" class="radio" style="transform: scale(0.7)" @click="pay = ('weixin')"></radio>
          </view>
          <view class="option-item">
            <image src="https://cos.aitshirt.cn/app-icon/yue.png" class="icon"></image>
            <text class="option-text">钱包</text>
            <radio value="alipay" :checked="pay === 'yue'" color="#F25A27" class="radio" style="transform: scale(0.7)" @click="pay = ('yue')"></radio>
          </view>
        </view>
      </view>
    </view>
    <view style="height:300rpx;" v-if="!refundOrder && offlineStatus"></view>

    <view class="geoPage" v-if="mapShow">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="no"
        :src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"
      ></iframe>
    </view>


    <u-modal v-model="showReturn" :show-cancel-button="false" :show-confirm-button="false" :show-title="false" :title-style="{ color: '#222222' }">
      <div class="u-model-content">
        <div class="title">退款售后</div>
        <view class="slot-content">
          <text >因商品为定制商品，如非衣服本身质量问题，
            不支持退款。详细请咨询客服，望理解！</text>
        </view>
        <div class="btns">
          <div class="btn" @click="showReturn = false">取消</div>
          <button class="btn is-success contacButton" open-type="contact"  plain="true" hover-class="none">联系客服</button>
        </div>
      </div>
    </u-modal>
  </view>
</template>

<script>
import OrderGoods from "@/components/OrderGoods.vue";
import {
  orderDetail
} from "@/api/order";
import Payment from "@/components/Payment";
import {
  isWeixin,
  copyClipboard
} from "@/utils/oldIndex";

import {
  cancelOrderHandle,
  takeOrderHandle,
  delOrderHandle,
  payOrderHandle,
} from "@/libs/order";
// import { wechatEvevt } from "@/libs/wechat";
import { useAuthStore } from '@/state/modules/user';
const userStore = useAuthStore();
const NAME = "OrderDetails";
import { _router } from "@/utils/oldIndex";
import PageLayout from "@/components/PageLayout.vue";

export default {
  name: NAME,
  components: {
    PageLayout,
    OrderGoods,
    Payment,
  },
  data: function () {
    return {
      showReturn: false,
      offlinePayStatus: 2,
      orderTypeName: "普通订单",
      orderTypeNameStatus: true,
      offlineStatus: true,
      id: "",
      orderInfo: {
        _status: {},
      },
      _router: _router,
      status: {},
      pay: 'weixin',
      payType: ["yue", "weixin"],
      from: 'routine',
      system_store: {},
      mapKay: "",
      mapShow: false,
      isIntegral: false
    };
  },
  computed: {
    refundOrder() {
      return this.orderInfo.refund_status > 0;
    },
    userInfo: function () {
      return userStore.user;
    },
  },
  onShow() {
    this.getDetail();
  },
  onLoad: function (option) {
    this.id = option.id;
    // this.getDetail();
  },
  methods: {
    copyClipboard,
    // 申请退款
    goGoodsReturn(orderInfo) {
      // _router.push({
      //   path: "/pages/order/GoodsReturn/index",
      //   query: {
      //     id: orderInfo.orderId,
      //   },
      // });

      // 弹框，申请售后 fixme
    },
    // goGroupRule(orderInfo) {
    //   _router.push({
    //     path: "/pages/activity/GroupRule/index",
    //     query: {
    //       id: orderInfo.pinkId,
    //     },
    //   });
    // },
    //拨打电话
    telPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        fail() {
          console.log("取消拨打");
        }
      });
    },
    showChang: function (data) {
      // 这里判断是不是微信小程序
      _router.push({
        path: "/pages/map/index",
        query: data,
      });
      // if (isWeixin()) {
      //   let config = {
      //     latitude: this.system_store.latitude,
      //     longitude: this.system_store.longitude,
      //     name: this.system_store.name,
      //     address: this.system_store.address
      //   };
      // } else {
      //   if (!this.mapKey)
      //     uni.showToast({
      //       title: "暂无法使用查看地图，请配置您的腾讯地图key",
      //       icon: "none",
      //       duration: 2000
      //     });
      //   return;
      //   this.mapShow = true;
      // }
    },
    goBack() {
      if (this.name === "MyOrder") {
        _router.back();
        return;
      } else {
        console.log(this);
        _router.replace({
          path: "/pages/order/MyOrder/MyOrder",
        });
        return;
      }
    },
    cancelOrder() {
      cancelOrderHandle(this.orderInfo.orderId)
        .then(() => {
          setTimeout(() => this.goBack(), 300);
        })
        .catch(() => {
          this.getDetail();
        });
    },
    takeOrder() {
      takeOrderHandle(this.orderInfo.orderId).finally(() => {
        this.getDetail();
      });
    },
    bindGoWuliu() {
      _router.push({
        path: '/pages/order/Logistics/Logistics',
        query:{
          id:this.orderInfo.orderId
        }
      })
    },
    delOrder() {
      delOrderHandle(this.orderInfo.orderId).then(() => {
        setTimeout(() => this.goBack(), 300);
      });
    },
    setOfflinePayStatus: function (status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 1 && that.orderTypeNameStatus === true) {
        that.payType.push("offline");
      }
    },
    getOrderStatus: function () {
      let orderInfo = this.orderInfo || {},
        _status = orderInfo._status || {
          _type: 0
        },
        status = {};
      let type = parseInt(_status._type),
        delivery_type = orderInfo.deliveryType,
        seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
        bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
        combination_id = orderInfo.combinationId ?
          parseInt(orderInfo.combinationId) :
          0;
      status = {
        type: type,
        class_status: 0,
      };
      if (type == 1 && combination_id > 0) {
        status.type = 6;
        status.class_status = 1;
      } //查看拼团
      if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
      if (type == 2) status.class_status = 3; //确认收货
      if (type == 4 || type === 0) status.class_status = 4; //删除订单
      if (
        !seckill_id &&
        !bargain_id &&
        !combination_id &&
        (type == 3 || type == 4)
      )
        status.class_status = 5; //再次购买
      if (type == 9) {
        //线下付款
        status.class_status = 0;
        this.offlineStatus = false;
      }
      this.status = status;
    },
    getDetail() {
      const id = this.id;
      if (!id) {
        uni.showToast({
          title: "订单不存在",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      orderDetail(id)
        .then((res) => {
          this.orderInfo = res.data;
          this.getOrderStatus();
          if (this.orderInfo.combinationId > 0) {
            this.orderTypeName = "拼团订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.bargainId > 0) {
            this.orderTypeName = "砍价订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.seckillId > 0) {
            this.orderTypeName = "秒杀订单";
            this.orderTypeNameStatus = false;
          }
          this.isIntegral = res.data.payType == 'integral'
          if (this.isIntegral) {
            this.orderTypeName = "积分兑换订单";
            this.orderTypeNameStatus = false;
          }

          this.system_store = res.data.systemStore || {};
          this.mapKey = res.data.mapKay;
          this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
        })
        .catch((err) => {
          uni.showToast({
            title: err.response.data.msg,
            icon: "none",
            duration: 2000,
          });
        });
    },
    async toPay(type) {
      var that = this;
      await payOrderHandle(this.orderInfo.orderId, type, that.from);
      that.getDetail();
    },
    routerGo() {
      _router.push({
        path: '/pages/shop/GoodsEvaluate/index',
        query: { id: cart.unique },
      });
    }
  },
};
</script>


<style scoped lang="less">
//@import "../../../style/style";

.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}

.order-details .writeOff {
  background-color: #fff;
  margin-top: 0.13 * 100rpx;
  padding-bottom: 0.3 * 100rpx;
}

.order-details .writeOff .title {
  font-size: 0.3 * 100rpx;
  color: #282828;
  height: 0.87 * 100rpx;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0.3 * 100rpx;
  line-height: 0.87 * 100rpx;
}

.order-details .writeOff .grayBg {
  background-color: #f2f5f7;
  width: 5.9 * 100rpx;
  height: 3.84 * 100rpx;
  border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
  margin: 0.5 * 100rpx auto 0 auto;
  padding-top: 0.55 * 100rpx;
}

.order-details .writeOff .grayBg .pictrue {
  width: 2.9 * 100rpx;
  height: 2.9 * 100rpx;
  margin: 0 auto;
}

.order-details .writeOff .grayBg .pictrue img {
  width: 100%;
  height: 100%;
  display: block;
}

.order-details .writeOff .gear {
  width: 5.9 * 100rpx;
  height: 0.3 * 100rpx;
  margin: 0 auto;
}

.order-details .writeOff .gear img {
  width: 100%;
  height: 100%;
  display: block;
}

.order-details .writeOff .num {
  background-color: #f0c34c;
  width: 5.9 * 100rpx;
  height: 0.84 * 100rpx;
  color: #282828;
  font-size: 0.48 * 100rpx;
  margin: 0 auto;
  border-radius: 0 0 0.2 * 100rpx 0.2 * 100rpx;
  text-align: center;
  padding-top: 0.04 * 100rpx;
}

.order-details .writeOff .rules {
  margin: 0.46 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
  border-top: 0.01 * 100rpx solid #f0f0f0;
  padding-top: 0.1 * 100rpx;
}

.order-details .writeOff .rules .item {
  margin-top: 0.15 * 100rpx;
}

.order-details .writeOff .rules .item .rulesTitle {
  font-size: 0.28 * 100rpx;
  color: #282828;
}

.order-details .writeOff .rules .item .rulesTitle .iconfont {
  font-size: 0.3 * 100rpx;
  color: #333;
  margin-right: 0.08 * 100rpx;
  margin-top: 0.05 * 100rpx;
}

.order-details .writeOff .rules .item .info {
  font-size: 0.28 * 100rpx;
  color: #999;
  margin-top: 0.05 * 100rpx;
}

.order-details .writeOff .rules .item .info .time {
  margin-left: 0.2 * 100rpx;
}

.order-details .map {
  height: 0.86 * 100rpx;
  font-size: 0.3 * 100rpx;
  color: #282828;
  line-height: 0.86 * 100rpx;
  border-bottom: 0.01 * 100rpx solid #f0f0f0;
  margin-top: 0.13 * 100rpx;
  background-color: #fff;
  padding: 0 0.3 * 100rpx;
}

.order-details .map .place {
  font-size: 0.26 * 100rpx;
  width: 1.76 * 100rpx;
  height: 0.5 * 100rpx;
  border-radius: 0.25 * 100rpx;
  line-height: 0.5 * 100rpx;
  text-align: center;
}

.order-details .map .place .iconfont {
  font-size: 0.27 * 100rpx;
  height: 0.27 * 100rpx;
  line-height: 0.27 * 100rpx;
  margin: 0.02 * 100rpx 0.03 * 100rpx 0 0;
}

.order-details .address .name .iconfont {
  font-size: 0.34 * 100rpx;
  margin-left: 0.1 * 100rpx;
}
</style>

<style lang="less" scoped>
.order-details {
  background: #F3F7F8;
  padding: 16rpx 0;
  .header {
    height: 86rpx;
    background: #FFFFFF;
    margin: 16rpx 0;
    background: #FFFFFF;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 38rpx;
    text-align: left;
    .data {
      .state {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
        line-height: 38rpx;
      }

    }
  }

  .allAddress {
    margin: 16rpx 0 !important;
    background: #ffffff !important;
    height: max-content;
    padding: 16rpx !important;
    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      width: 100% !important;
      height: max-content !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  .addressCon {
    width: 100%;
    &.no-address {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      //width: 718rpx;
      height: 128rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx  dashed #C2C2C2;
      .address-icon {
        width: 41rpx;
        height: 48rpx;
      }
    }
  }

  :deep(.orderGoods) {
    background: #ffffff;
  }
  .option-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    padding: 24rpx 20rpx 0 0;
    .option-item {
      display: flex;
      align-items: center;
      .icon {
        width: 32rpx;
        height: 32rpx;
      }
      .option-text {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
        line-height: 38rpx;
        margin: 0 16rpx;
      }
      .radio {
        width: 28rpx;
        height: 28rpx;
        margin-left: auto;
      }
    }
  }

  .footer {
    width: 752rpx;
    height: 168rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9,9,9,0.08);
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    .bnt {
      width: 160rpx;
      height: 72rpx;
      background: #F3F7F8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 72rpx;
      text-align: center;
      &.bg-color-red {
        background: linear-gradient( 90deg, #F32F1A 0%, #F68A2D 100%);
        color: #FFFFFF;
      }
    }
  }
}



.u-model-content {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx;

  .title {
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
  }

  .slot-content {
    margin: 24rpx 0 40rpx;
    text-align: center;
  }

  .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16rpx;
    padding: 0 0 32rpx;

    .btn {
      width: 284rpx;
      height: 72rpx;
      background: #f3f7f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #6f6f6f;
      line-height: 72rpx;
      text-align: center;

      &.is-success {
        background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
        color: #ffffff;
      }
    }
  }
}
</style>
